<template>
  <div class="main-area-box">
    <div class="up-area-box">
      <!-- 左侧图片区域 -->
      <div class="flex-center-t">
        <div>
          <img v-if="goodsInfo.goodsImages && goodsInfo.goodsImages.length > 0" class="width-360 height-360" :src="goodsInfo.goodsImages[0].imageUrl" alt=""/>
          <div>
            <template v-if="goodsInfo.goodsImages && goodsInfo.goodsImages.length > 5">
              <!-- 大于5张图片时，轮播显示 -->
              <el-carousel :interval="5000" arrow="always" :autoplay="false" height="64" indicator-position="none">
                <el-carousel-item v-for="(item, index) in goodsInfo.goodsImages" :key="index" >
                  <div class="swiper-item-img">
                    <img v-for="(subitem, subindex) in item" :key="subindex" :src="subitem.imageUrl" :class="entity.picUrl == item.imageUrl ? 'mouse-selected' : ''"
                      @mouseenter="mousePicEnter(item)" alt=""/>
                  </div>
                </el-carousel-item>
              </el-carousel>
            </template>
            <template v-else>
              <!-- 小于5张图片时，固定显示 -->
              <div v-if="goodsInfo.goodsImages && goodsInfo.goodsImages.length > 0" class="swiper-item-img">
                <img v-for="(item, index) in goodsInfo.goodsImages" :key="index" :src="item.imageUrl" :class="entity.picUrl == item.imageUrl ? 'mouse-selected' : ''"
                  @mouseenter="mousePicEnter(item)" alt="" />
              </div>
            </template>
          </div>
        </div>
        <div class="area-right mar-l-20 mar-t-20">
          <div class="font-24 font-w">{{goodsInfo.title}} <span v-if="goodsInfo.goodsCode">（货号  {{goodsInfo.goodsCode}}）</span></div>
          <div class="supply-price">
            <div class="price-box">
              <span class="mar-r-20 font-16">零售价</span>
              <span v-if="goodsInfo.skuFlag == 0 || !goodsInfo.minPrice">￥{{goodsInfo.sellPrice}}</span>
              <span v-if="goodsInfo.skuFlag == 1 && goodsInfo.minPrice">￥{{goodsInfo.minPrice}} ~ ￥{{goodsInfo.maxPrice}}</span>
            </div>
            <div class="price-box">
              <span class="font-16">划线价</span>
              <span v-if="goodsInfo.scribingPrice && (goodsInfo.skuFlag == 0 || !goodsInfo.minScribingPrice)">￥{{goodsInfo.scribingPrice}}</span>
              <span v-if="goodsInfo.scribingPrice && goodsInfo.skuFlag == 1 && goodsInfo.minScribingPrice">￥{{goodsInfo.minScribingPrice}} ~ ￥{{goodsInfo.maxScribingPrice}}</span>
            </div>
          </div>
          <div class="goods-highlights">
            <h3>商品卖点</h3>
            <span style="line-height: 30px;">
              {{goodsInfo.sellPoint}}
            </span>
          </div>
          <div class="btn-group-box mar-t-30 mar-b-30">
            <span class="self-btn-style hollow-btn mar-l-15" @click="$router.go(-1)">返回</span>
          </div>
        </div>
      </div>
    </div>
    <div class="down-area-box" style="margin-top: 20px">
      <div style="width:70%;margin: 0 auto">
        <el-tabs type="card" v-model="tabsVal">
          <el-tab-pane label="商品详情" name="1">
            <component-details-h5 v-if="goodsInfo.detailTemplateId" :templateId="goodsInfo.detailTemplateId" :showMenuPanel="false"></component-details-h5>
          </el-tab-pane>
          <el-tab-pane label="规格参数" name="2">
            <div v-if="goodsInfo.goodsParameters">
              <el-row v-for="(item, index) in goodsInfo.goodsParameters" :key="index">
                <el-col :span="5" class="align-r pad-r-10">{{item.parameterName}}：</el-col>
                <el-col :span="19">{{item.parameterValue}}</el-col>
              </el-row>
            </div>
          </el-tab-pane>
          <el-tab-pane label="海报文案" name="3">
            <div>海报商品名称：{{goodsInfo.posterTitle}}</div>
            <div>海报商品推荐语：{{goodsInfo.posterRecommend}}</div>
            <div>海报分享文案：{{goodsInfo.shareCopy}}</div>
            <hr />
            <el-row :gutter="20" style="height:350px">
              <el-col :span="8" style="height:100%">
                <div style="font-weight:700">单列大图</div>
                <div class="mar-t-10 bg-color-white width-300 height-300" style="display:flex;align-items:center;border: 1px solid #f2f2f2; overflow: hidden;">
                  <img v-if="goodsInfo.picUrl" style="width:100%" :src="goodsInfo.picUrl" alt=""/>
                </div>
              </el-col>
              <el-col :span="8" style="height:100%">
                <div style="font-weight:700">分享图片</div>
                <div class="mar-t-10 bg-color-white width-300 height-300" style="display:flex;align-items:center;border: 1px solid #f2f2f2; overflow: hidden;">
                  <img v-if="goodsInfo.shareImageUrl" style="width:100%" :src="goodsInfo.shareImageUrl" alt=""/>
                </div>
              </el-col>
              <el-col :span="8" style="height:100%">
                <div style="font-weight:700">海报图片</div>
                <div class="mar-t-10 bg-color-white width-300 height-300" style="display:flex;align-items:center;border: 1px solid #f2f2f2; overflow: hidden;">
                  <img v-if="goodsInfo.posterImageUrl" style="width:100%" :src="goodsInfo.posterImageUrl" alt=""/>
                </div>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="SKU明细" name="4">
            <goods-sku></goods-sku>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import thirdAuth from '../../components/third-auth'
import ComponentDetailsH5 from '@/components/ComponentTemplate/ComponentDetailsH5'
import GoodsSku from './components/goods-sku'
import { getGoodsDetail } from '@/api/goods/goods'
import { getByEnterpriseId } from '@/api/user/enterprise'

export default {
  components: {
    ComponentDetailsH5, GoodsSku
  },
  mixins: [thirdAuth],
  data() {
    return {
      // 列表传递的参数
      queryParams: {
        // 商品ID
        goodsId: '',
        // 店铺ID
        shopId: '',
        // 平台类型
        platformType: 1,
        // 0 = 未选商品 1 = 已选商品
        selectType: 0
      },
      financeVisible: false,
      supplierVisible: false,
      enterpriseConfig: {},
      entity: {},
      goodsInfo: {
        skuFlag: 0,
        goodsImages: [],
        goodsParameters: []
      },
      listLoading: false,
      skuList: [],
      enCategoryList: [],
      enCategoryIds: [],
      dialogVisible: false,
      tabsVal: '1',
      // 零售商品类目
      retailCategoryIds: [],
      // 批发商品类目
      wholesaleCategoryIds: [],
      // 商品的所有分类json
      categoryData: [],
      // 批发商品类目
      wholesaleCategoryData: [],
      showError: false
    }
  },
  // 初始化页面
  created() {
    this.queryParams = this.getCurrentPage().query
    this.initGoodsInfo()
  },
  mounted() {
    if (this.queryParams.goodsId) {
      this.initGoodsInfo()
    }
    getByEnterpriseId(this.getEnterpriseId()).then(response => {
      if (response.isError) return
      this.enterpriseConfig = response.data
    })
  },
  methods: {
    initGoodsInfo() {
      getGoodsDetail({ goodsId: this.queryParams.goodsId }).then((response) => {
        this.goodsInfo = response.data
        this.retailCategoryIds = []
        if (this.goodsInfo.retailCategoryIds && this.goodsInfo.retailCategoryIds.length > 0) {
          this.goodsInfo.retailCategoryIds.forEach(categoryId => this.retailCategoryIds.push(categoryId))
        }
        this.wholesaleCategoryIds = []
        if (this.goodsInfo.wholesaleCategoryIds && this.goodsInfo.wholesaleCategoryIds.length > 0) {
          this.goodsInfo.wholesaleCategoryIds.forEach(categoryId => this.wholesaleCategoryIds.push(categoryId))
        }
        this.$bus.$emit('goods.edit.data', this.goodsInfo)
      })
    },
    rejectSave() {
      this.financeVisible = true
    },
    // 图片鼠标移入事件
    mousePicEnter(item) {
      if (item) {
        this.entity.picUrl = item.imageUrl
      }
    }
  }
}
</script>

<style lang="less" scoped>
.main-area-box {
  width: 100%;
  height: 100%;
  background: #f7f9fb;
  padding: 10px;
  .up-area-box {
    background: #fff;
    padding-top: 10px;
    .main-img-box {
      .main-img {
        img {
          width: 360px;
          height: 360px;
        }
      }
    }
    .goods-title {
      font-size: 20px;
      font-weight: 400;
      color: #323233;
      line-height: 30px;
    }
    .other-info-box {
      font-size: 14px;
      padding-top: 20px;
      padding-bottom: 20px;
      border-bottom: 1px solid #eeeeee;
      & > span {
        padding-left: 13px;
        padding-right: 13px;
      }
      & > span:nth-child(1),
      & > span:nth-child(2) {
        color: #666666;
      }
    }
    .goods-table-info {
      /deep/ .el-table__row {
        font-size: 14px;
        color: #323233;
        img {
          width: 40px;
          height: 40px;
        }
      }
      /deep/ .is-leaf {
        border: none;
        background: #fff;
        color: #666666;
        font-weight: 400;
        font-size: 14px;
      }
    }
    .btn-group-box {
      display: flex;
      .self-btn-style{
        width: 120px;
        padding: 10px;
        font-size: 14px;
        border-radius: 4px;
        text-align: center;
        box-sizing: border-box;
        cursor:pointer;
      };
      .fill-btn:hover{
        background: rgba(255, 68, 0, 0.7);
      }
      .fill-btn {
        background: #FF4400;
        color: #fff;
      }
      .hollow-btn {
        background: #fff;
        border: 1px solid #FF4400;
        color: #FF4400;
      }
    }
    /deep/ .el-carousel__container {
      width: 360px;
      height: 64px;
      & .el-carousel__item {
        height: 64px;
      }
      .swiper-item-img {
        width: 360px;
        display: flex;
        justify-content: flex-start;

        img {
          width: 64px;
          height: 64px;
          margin-left: 10px;
        }
        & > img:nth-child(1) {
          margin-left: 0;
        }
      }
    }
    .swiper-item-img {
      width: 360px;
      display: flex;
      justify-content: flex-start;
      img {
        width: 64px;
        height: 64px;
        margin-left: 10px;
      }
      & > img:nth-child(1) {
        margin-left: 0;
      }
    }
  }
  .down-area-box {
    background: #fff;
    padding-bottom: 50px;
    /deep/ .el-tabs--card {
      .el-tabs__header {
        border: none;
        .el-tabs__item {
          border-left: none;
        }
      }
    }
    /deep/ .el-tabs__nav-scroll {
      margin-left: 30%;
      .el-tabs__nav {
        border: none;
        .is-active {
          border-top: 2px solid #ff5a00;
        }
      }
    }
    .goods-recomment-area {
      width: 30%;
      margin-left: 540px;
      font-size: 16px;
      line-height: 30px;
      color: #333333;
    }
    .goods-info-box {
      // margin-left: 540px;
      & > ul {
        list-style: none;
        width: 686px;
        margin: 0 auto;
        background: #f9f9fa;
        font-size: 14px;
        color: #333333;
        display: flex;
        padding: 13px 20px;
        flex-wrap: wrap;
        li {
          width: 33.33%;
        }
      }
      .goods-img-box {
        width: 790px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        img {
          width: 500px;
        }
      }
    }
  }
}
.flex-center-t{
  display: flex;
  align-items: flex-start;
  justify-content: center;
  .supply-price{
    padding: 0px 10px 10px;
    background: #f9f9fa;
    color: #666666;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    position: relative;
    .price-box {
      margin-top: 15px;
      width: 35%;
      display: flex;
      justify-content: space-between;
      &>span:nth-child(2) {
        color: #323233;
        font-size: 18px;
      }
    }
    .sock-box {
      position: absolute;
      right: 10px;
      top: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      &>span:nth-child(1) {
        font-size: 18px;
        color: #000;
      }
    }
  }
}
.area-right{
  width: 650px;
  line-height: 1.4;
}
.mouse-selected {
  border: 2px solid #f40;
}
</style>